<template>
  <div class="feedback-box">
    <div class="tipsone">
      <p class="welcome">欢迎给我们留言</p>
      <p>Welcome to leave us a message!</p>
    </div>
    <el-input
      resize="none"
      class="feedback-text"
      type="textarea"
      :rows="10"
      placeholder="请输入内容"
      v-model="msg">
    </el-input>
    <button class="send-btn" @click="send" >send</button>
    <div class="tipstwo">
      <p>任何的疑惑或者建议都可以在上方留言</p>
      <p>或者通过邮箱联系我们</p>
      <p>邮箱地址：1300958922@qq.com</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Feedback',
  data () {
    return {
      msg: '',
      username: ''
    }
  },
  methods: {
    send () {
      if (this.msg !== '') {
        this.$axios.post('http://localhost:9000/feedback', {
          data: {
            user: this.username,
            msg: this.msg
          }
        }).then(res => {
          this.$message.success('反馈成功')
          console.log(res)
          this.msg = ''
        }, err => {
          this.$message.error('网络异常，请稍后再试')
          console.log(err)
        })
      }
    }
  },
  created () {
    var token = JSON.parse(window.localStorage.getItem('token'))
    this.username = token
  }
}
</script>

<style  scoped>
.feedback-box{
  position: relative;
  height: 100%;
}
.tipsone{
  padding: 5% 0;
  font-weight: bold;
  font-size: 30px;
}
.feedback-text{
  width: 80%;
  margin: 0 0 5% 0;
}
.send-btn{
  color: black;
  font-weight: bold;
  width: 80%;
  height: 40px;
  background: white;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30%;
  cursor: pointer;
}
.send-btn:hover{
  /* background: #89c4ff; */
  background: #409EFF;
  color: white;
  border: none;
}
.tipstwo{
  color: rgba(131, 136, 140, 0.486);
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
